<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>七一云党建</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/pace-theme-loading-bar.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/md-common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div style="opacity: 0" class="swiper-container pages-box">
  <section class="u-arrow-bottom">
    <div class="pre-wrap-bottom">
    </div>
  </section>
  <div id="audio_btn" class="off" style="display: block;">
    <div id="yinfu"></div>
    <audio loop="" src="./resource/71.mp3" id="media" autoplay="autoplay" preload=""></audio>
  </div>
  <div class="swiper-wrapper">
    <!--div.swiper-slide.page$*11>{$}-->
    <div class="swiper-slide page1">
      <div class="top-box">
        <img class="yunduo ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.91rem" src="./images/1-yunduo.png" alt="">
        <img class="title-text ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 5.06rem" src="./images/1-title-text.png" alt="">
        <img class="title-bottom-text ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 4.15rem" src="./images/1-title-bottom-text.png" alt="">
        <img class="yuan-web ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
             swiper-animate-delay="2s" style="width: 1.86rem" src="./images/1-yuan-web.png" alt="">
        <img class="book ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
             swiper-animate-delay="2s" style="width: 1.24rem" src="./images/1-book.png" alt="">
        <img class="yuan-app ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s"
             swiper-animate-delay="2s" style="width: 1.49rem" src="./images/1-yuan-app.png" alt="">
        <img class="lg-article ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 4.52rem" src="./images/1-lg-article.png" alt="">
        <img class="md-article ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" style="width: 1.99rem" src="./images/1-md-article.png" alt="">
        <img class="samll-article ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 2.04rem" src="./images/1-samll-article.png" alt="">
        <img class="bg-yuan ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 6.79rem" src="./images/1-bg-yuan.png" alt="">
        <p class="top-bottom-text ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="1.5s">
          <span>宣传</span><span>教育</span><span>管理</span><span>监督</span><span>考核</span><span>服务</span></p>
      </div>
      <div class="bottom-text-box">
        <p class="title ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="0.8s">七一云党建</p>
        <p class="desc  ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s"
           swiper-animate-delay="0.8s">多终端、全渠道、智慧型党建平台</p>
      </div>
    </div>
    <div class="swiper-slide page2">
      <img style="width: 3.51rem" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" src="./images/2-top-yuan.png" alt="">
      <div class="top-title-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="top-title">传统党建难点 <img style="width:.35rem;margin-left: .1rem" src="./images/2-top-text-right.png"
                                         alt=""></p>
      </div>
      <div class="page2-center ani " swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
           swiper-animate-delay="0.8s">
        <div class="center-item-box">
          <div class="center-list ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="0.8s">
            分散难管理
            <span class="red-top">党员组织</span>
          </div>
          <div class="center-list ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="1s">
            方式很单一
            <span class="red-top">党建宣传</span>
          </div>
          <div class="center-list ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="1.2s">
            组织执行难
            <span class="red-top">党建活动</span>
          </div>
          <div class="center-list ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="1.4s">
            考核难客观
            <span class="red-top">党员监督</span>
          </div>
          <div class="center-list ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="1.6s">
            成果难追踪
            <span class="red-top">党员学习</span>
          </div>
          <div class="center-list ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
               swiper-animate-delay="1.8s">
            流程效率低
            <span class="red-top">党员服务</span>
          </div>
        </div>
      </div>
      <img class="bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.8s" src="./images/2-bottom-bg.png" alt="">
    </div>
    <div class="swiper-slide page3">
      <img style="width: 3.51rem" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" src="./images/2-top-yuan.png" alt="">
      <div class="top-title-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="top-title">七一云党建 <img style="width:.35rem;margin-left: .1rem" src="./images/2-top-text-right.png"
                                        alt=""></p>
        <p class="top-title-desc">一站式解决党建难题</p>
        <img class="top-yun" style="width: 4.22rem" src="./images/3-top-yun.png" alt="">
      </div>
      <div class="page3-center ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <img style="width: 3.88rem;margin-bottom: 0.95rem" src="./images/3-danghui.png" alt="">
        <p>
          <img style="width: 4.13rem" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
               swiper-animate-delay="1.5s" src="./images/3-center-text-1.png" alt="">
        </p>
        <p style="margin-bottom: .53rem">
          <img style="width: 2rem" class="ani"
               swiper-animate-effect="fadeInUp"
               swiper-animate-duration="2s"
               swiper-animate-delay="1.5s" src="./images/3-center-text-2.png" alt="">
        </p>
        <p><img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
                swiper-animate-delay="1.5s" style="width: 3.38rem" src="./images/3-center-text-3.png" alt=""></p>
      </div>
      <img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s"
           swiper-animate-delay="1s" style="position: absolute;bottom: 0.15rem ;left: 0;z-index: 20"
           src="./images/3-bottom-yun.png" alt="">
      <img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.8s" style="height: 1.70rem;position: absolute;left:0; bottom: 0"
           src="./images/3-bottom-bg.png" alt="">
    </div>
    <div class="swiper-slide page4">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <div class="top-title-box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <p class="top-title">七一云党建 <img style="width:.35rem;margin-left: .1rem" src="./images/2-top-text-right.png"
                                          alt=""></p>
          <p class="top-title-desc">两种平台，多端支持</p>
        </div>
      </div>
      <div>
        <div class="flex-row row1 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s">
          <div class="flex-grow-0">
            <img style="width: 5.14rem" src="./images/4-weixin.png" alt="">
          </div>
          <div class="desc-box flex-grow-1">
            <img class="number1" style="width: 2.92rem" src="./images/4-01.png" alt="">
            <p>功能丰富，管理便捷</p>
            <img class="arror-left" style="width: 1.64rem" src="./images/4-arror-left.png" alt="">
          </div>
        </div>
        <div class="flex-row row2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" style="margin-top:-0.8rem">
          <div class="desc-box flex-grow-1">
            <img class="number2" style="width: 3.35rem" src="./images/4-02.png" alt="">
            <p>个性化定制 <br>满足不同需求</p>
            <img class="arror-right" style="width: 1.64rem" src="./images/4-arror-right.png" alt="">
          </div>
          <div class="flex-grow-0">
            <img class="mobile" style="width: 4.48rem" src="./images/4-mobile.png" alt="">
            <img class="yuan ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
                 swiper-animate-delay="1.8s" style="width: 2.18rem" src="./images/4-center-yuan.png" alt="">
          </div>
        </div>
      </div>
      <div class="button-box">
        <p>
    <span class="jianbian ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
          swiper-animate-delay="1.2s">一云多端</span>
        </p>
        <p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
           swiper-animate-delay="1.4s">
          <span class="outline">党员移动端</span>
          <span class="outline">党务PC端</span>
          <span class="outline">操作灵便</span>
        </p>
      </div>
    </div>
    <div class="swiper-slide page5">
      <img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 3.51rem" src="./images/2-top-yuan.png" alt="">
      <div class="top-title-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="top-title">七一云党建 <img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
        <p class="top-title-desc">应用对象广</p>
      </div>
      <div class="list-box">
        <div class="flex-list">
          <div class="flex-grow-0 page5-center-list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s">
            <img src="./images/5-center-1.png" alt="">
            <p>政府机关</p>
          </div>
          <div class="flex-grow-0 page5-center-list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s">
            <img src="./images/5-center-2.png" alt="">
            <p>政府机关</p>
          </div>
          <div class="flex-grow-0 page5-center-list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s">
            <img src="./images/5-center-3.png" alt="">
            <p>政府机关</p>
          </div>
          <div class="flex-grow-0 page5-center-list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s">
            <img src="./images/5-center-4.png" alt="">
            <p>政府机关</p>
          </div>
        </div>
      </div>
      <div class="arrorw">
        <img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.64rem" src="./images/4-arror-right.png" alt="">
      </div>
      <div class="text-box">
        <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1s">不论党委、党工、干部与群众，</p>
        <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1s">还是政府机关、国企央企、事业单位、或园区高校，</p>
        <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1s">各种功能板块，<span class="default">积木式搭建</span>，简单易配。</p>
      </div>
      <img class="bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.7s" src="./images/5-bottom-bg.png" alt="">
      <img class="bottom-yuan ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.7s" style="width: 2.5rem" src="./images/5-bottom-yuan.png" alt="">
    </div>
    <div class="swiper-slide page6">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <div class="top-title-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <p class="top-title">七一云党建 <img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
          <p class="top-title-desc">传播效率高</p>
        </div>
      </div>
      <div class="page7-text-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="1.5s">
        <p>组织在线学习、考试，推送知识库、H5，</p>
        <p>内容 <span>实时更新</span>，分享 <span>一键可及。</span></p>
      </div>
      <div class="centerbox">
        <div>
          <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s" style="width: 6.84rem" src="./images/6-center-bg.png" alt="">
          <img class="dian ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s" style="width: 3.44rem" src="./images/6-dian.png" alt="">
          <img class="qipao1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s" style="width: 0.83rem" src="./images/6-qipao1.png" alt="">
          <img class="qipao2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s" style="width: 1rem" src="./images/6-qipao2.png" alt="">
          <img class="book2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s" style="width: 1.16rem" src="./images/6-book2.png" alt="">
          <img class="book3 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s" style="width: 1.67rem" src="./images/6-book3.png" alt="">
          <img class="book1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s" style="width: 3.23rem" src="./images/6-book1.png" alt="">
          <img class="hand ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
               swiper-animate-delay="0.6s" style="width: 1.12rem" src="./images/6-hand.png" alt="">
        </div>
      </div>
    </div>
    <div class="swiper-slide page7">
      <img style="width: 3.51rem" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" src="./images/2-top-yuan.png" alt="">
      <div class="top-title-box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.6s">
        <p class="top-title">七一云党建 <img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
        <p class="top-title-desc">规范易监督</p>
      </div>
      <div class="center-img-box">
        <img style="width: 4.80rem" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" src="./images/7-center-img.png" alt="">
        <img class="person-7 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s" style="width: .8rem" src="./images/7-person.png" alt="">
        <img class="yuan-7 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 6.01rem" src="./images/7-yuan.png" alt="">
      </div>
      <div class="bottom-text-box">
        <img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width:1.64rem" src="./images/4-arror-left.png" alt="">
        <div style="position: relative;z-index: 1000">
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s">根据党建工作要求，制定规范化活动内容，</p>
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.2s">并监督各环节积极落实，</p>
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.3s">活动过程效果<span>可视化展现。</span></p>
        </div>
      </div>
      <img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="position: absolute;left: 0;bottom: 0;" src="./images/7-bottom-bg.png"
           alt="">
    </div>
    <div class="swiper-slide page8">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <div class="top-title-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <p class="top-title">七一云党建 <img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
          <p class="top-title-desc">课程资源多</p>
        </div>
      </div>
      <img class="top-yuan  ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 2.65rem" src="./images/8-top-yuan.png" alt="">

      <div class="center-img-box ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
           swiper-animate-delay="1.2s">
        <div class="top-center-img">
          <img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s" style="width: 1.64rem" src="./images/4-arror-right.png" alt="">
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.3s">图文视频、音频、MG动画、卡通形象、 </p>
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.4s">H5、PPT课件、电子书，</p>
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s">丰富的党课资源库， </p>
          <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.6s"><span>打造永远在线的微党校。</span></p>
        </div>
        <div class="center-img-box-box">
          <img class="yunduo ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s"
               swiper-animate-delay="0.7s" style="width: 3.39rem" src="./images/8-yunduo.png" alt="">
          <img class="video ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s"
               swiper-animate-delay="0.7s" style="width: 0.71rem" src="./images/8-video.png" alt="">
          <img class="book ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
               swiper-animate-delay="0.7s" style="width: .42rem" src="./images/8-book.png" alt="">
          <img class="article ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
               swiper-animate-delay="0.7s" style="width: 1.35rem" src="./images/8-article.png" alt="">
          <img class="dang ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s"
               swiper-animate-delay="0.7s" style="width:1.65rem " src="./images/8-dang.png" alt="">
          <img class="phone ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="0.7s" style="width: 5.61rem" src="./images/8-phone.png" alt="">
        </div>
      </div>
    </div>
    <div class="swiper-slide page9">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <div class="top-title-box ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <p class="top-title">七一云党建 <img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
          <p class="top-title-desc">随时随地学</p>
        </div>
      </div>
      <div class="page9-container">
        <img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 2.52rem" src="./images/9-douhao.png" alt="">
        <div class="page9-text-box ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.8s">
          <p>无论党务工作、活动组织，</p>
          <p> 还是学习、投票、评比， </p>
          <p>只需<span>轻点手指，</span>党建工作即刻可达。</p>
        </div>
        <div class="page9-imgbox ">
          <img style="width:5.36rem" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
               swiper-animate-delay="0.3s" src="./images/9-center-phone-bg.png" alt="">
          <div class="page9-imgbox-list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s">
            <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                 swiper-animate-delay="1.2s" style="width: 1.12rem" src="./images/9-kaoshi.png" alt="">
            <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                 swiper-animate-delay="1.2s" style="width: .84rem;margin:0.1rem 0.7rem 0" src="./images/9-baoming.png"
                 alt="">
            <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                 swiper-animate-delay="1.2s" style="width: 1rem" src="./images/9-toupiao.png" alt="">
          </div>
        </div>
      </div>
      <img class="page-9-yuan ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width:3.72rem" src="./images/9-bg-yuan.png" alt="">
      <img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="position: absolute;left:0;bottom: 0;z-index: 100"
           src="./images/9-bottom-bg.png" alt="">
    </div>
    <div class="swiper-slide page10">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <div class="top-title-box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <p class="top-title">七一云党建 <img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
          <p class="top-title-desc">党建成本低</p>
        </div>
      </div>
      <div class="page10-container">
        <img class="douhao ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 2.52rem" src="./images/9-douhao.png" alt="">
        <div class="page10-text-box ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s">
          <p>根据党员规模与党建需求，</p>
          <p>选择对应功能模块，</p>
          <p>开启<span>互联网+智慧党建</span>新时代。</p>
        </div>
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.25rem;margin-top: 1.2rem"
             src="./images/10-centertandperson.png" alt="">
      </div>
      <img class="yuan ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 4.18rem" src="./images/10-yuan.png" alt="">
      <img class="bottom-left ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 3.11rem" src="./images/10-bottom-left.png" alt="">
    </div>
    <div class="swiper-slide page11">
      <div class="top-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <div class="top-title-box ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <p class="top-title">联系试用<img style="width:.35rem" src="./images/2-top-text-right.png" alt=""></p>
        </div>
      </div>
      <img class="top-yuan ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 2.65rem" src="./images/8-top-yuan.png" alt="">
      <form class="page11-content ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
            swiper-animate-delay="0.3s">
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <div class="flex-row flex-y-center"><img style="width: .39rem" src="./images/11-icon1.png" alt="">单位名称</div>
          <input type="text" placeholder="请输入您所在的单位名称">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s">
          <div class="flex-row flex-y-center"><img style="width: .37rem" src="./images/11-icon2.png" alt="">党员人数</div>
          <input type="text" placeholder="请输入您所在单位的党员人数">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.7s">
          <div class="flex-row flex-y-center"><img style="width: .38rem" src="./images/11-icon3.png" alt="">联系人</div>
          <input type="text" placeholder="请输入您的姓名">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.9s">
          <div class="flex-row flex-y-center"><img style="width: .33rem" src="./images/11-icon4.png" alt="">联系方式</div>
          <input type="text" placeholder="请输入您的联系电话">
        </div>
        <button class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                swiper-animate-delay="1.4s" type="submit">确认提交
        </button>
      </form>
      <div style="text-align: center">
        <img class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 4.84rem;margin-top: 0.25rem" src="./images/11-copyRight.png"
             alt="">
      </div>
    </div>
  </div>
</div>
</div>
<script src="./js/rem.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/pace.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
  window.onload = function () {
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          //console.log(this.activeIndex);
          if (this.activeIndex !== 10) {
            $('.u-arrow-bottom').show();
            if (this.activeIndex == 0) {
              $('.bg-yuan').removeClass('phoneAni').addClass('fadeInLeft');
              setTimeout(function () {
                $('.bg-yuan').addClass('phoneAni');
              }, 2500);
            } else if (this.activeIndex == 6) {
              $('.yuan-7').removeClass('phoneAni').addClass('zoomIn');
              setTimeout(function () {
                $('.yuan-7').addClass('phoneAni');
              }, 2500);
            } else if (this.activeIndex == 7) {
              $('.phone').removeClass('phoneAni').addClass('fadeInLeft');
              setTimeout(function () {
                $('.phone').addClass('phoneAni');
              }, 2500);
            }
          } else {
            $('.u-arrow-bottom').hide();
          }
          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      },
    });
    Pace.on('hide', function () {
      console.log(12);
      $('.pages-box').css({opacity: 1})
    });
    $(document).ready(function () {
      var audio = document.getElementById('media');
      audio.play();
      if(audio.paused){
        $('#audio_btn').removeClass('rotate')
      }else {
        $('#audio_btn').addClass('rotate')
      }
      document.addEventListener('WeixinJSBridgeReady',function () {
        audio.play();
        $('#audio_btn').addClass('rotate')
      },false)
      $('#audio_btn').click(function () {
        if(audio.paused){
          audio.play();
          $(this).addClass('rotate')
        }else {
          audio.pause();// 暂停
          $(this).removeClass('rotate')
        }

      })
    });
    setTimeout(function () {
      $('.bg-yuan').addClass('phoneAni');
    }, 2500);
  }
  $(function () {
    $("button[type='submit']").click(function (e) {
      e.preventDefault();
    })
  })
</script>
<script>
  $(function () {
    var url = encodeURIComponent(window.location.href);
    var reulut;

    $.post('https://www.cloudcpc.com/share.php',
        {"url": url},
        function (result) {
          reulut = result;
          console.log(result)
          wx.config({
            debug: false,
            appId: reulut.appId, // 必填，公众号的唯一标识
            timestamp: reulut.timestamp, // 必填，生成签名的时间戳
            nonceStr: reulut.nonceStr, // 必填，生成签名的随机串
            signature: reulut.signature,// 必填，签名
            jsApiList: [ // 必填，需要使用的JS接口列表
              'onMenuShareAppMessage', //1.0 分享到朋友
              'onMenuShareTimeline', //1.0分享到朋友圈
              'updateAppMessageShareData', //1.4 分享到朋友
              'updateTimelineShareData' //1.4分享到朋友圈
            ]
          });

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: '七一云党建平台业务介绍', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-71yun/images/dj_share71yun.png', // 分享图标
            });

            wx.updateTimelineShareData({
              title: '七一云党建平台业务介绍', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-71yun/images/dj_share71yun.png', // 分享图标
            });
          });

        }
    );
  })
</script>
</body>
</html>